<script setup lang="ts">
import { getTime } from '@/utils/times'
import { useUserStore } from '@/stores/modules/user'
const userStore = useUserStore()
</script>

<template>
  <div>
    <br />
    <el-card>
      <div class="box">
        <img :src="userStore.userInfo.avatar" class="avatar" />
        <div>
          <h3>{{ getTime() }} {{ userStore.userInfo.name }}</h3>
          <p>上海市长江路社区卫生服务中心</p>
        </div>
      </div>
    </el-card>
  </div>
  <div class="box2">
    <SvgIcon class="center" name="welcome" width="800px" height="600px" />
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  align-items: center;
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 20%;
    margin-right: 10px;
  }
  h3 {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 20px;
  }
}
.box2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>
